$.jgrid.defaults.styleUI = 'Bootstrap';

$(document).ready(function () {
	
	//普通表格数据START
	$("#jqGrid").jqGrid({
		url: ctx+'/tableData.do',
		datatype: "json",
		 colModel: [
			{ label: 'Category Name', name: 'categoryName', width: 75 },
			{ label: 'Product Name', name: 'productName', width: 90 },
			{ label: 'Country', name: 'country', width: 100 },
			{ label: 'Price', name: 'price', width: 80, sorttype: 'integer' },
			// sorttype is used only if the data is loaded locally or loadonce is set to true
			{ label: 'Quantity', name: 'quantity', width: 80, sorttype: 'number' }                   
		],
		viewrecords: true, // show the current page, data rang and total records on the toolbar
		width: 780,
		height: 200,
		rowNum: 30,
		loadonce: true, // this is just for the demo
		pager: "#jqGridPager"
	
	});
	//普通表格数据END
	
	
	//多级表格数据START
	jQuery("#list11").jqGrid(
		      {
		        url : ctx+'/tableData.do',
		        datatype : "json",
		        height : 200,
		        colModel: [
		       			{ label: 'id', name: 'id', width: 75 },
		       			{ label: 'Category Name', name: 'categoryName', width: 75 },
		       			{ label: 'Product Name', name: 'productName', width: 90 },
		       			{ label: 'Country', name: 'country', width: 100 },
		       			{ label: 'Price', name: 'price', width: 80, sorttype: 'integer' },
		       			// sorttype is used only if the data is loaded locally or loadonce is set to true
		       			{ label: 'Quantity', name: 'quantity', width: 80, sorttype: 'number' }                   
		       		],
		        rowNum : 10,
		        rowList : [ 10, 20, 30 ],
		        pager : '#pager11',
		        sortname : 'id',
		        viewrecords : true,
		        width: 780,
				height: 200,
		        sortorder : "desc",
		        multiselect : false,
		        subGrid : true,
		        subGridUrl : ctx+'/SubGrid.do',
		        subGridModel : [ {name : 'no',width : 100}, 
			                     {name : 'item',width : 80,align : "right"}, 
			                     {name : 'unit',width : 80,align : "right"}, 
			                     {name : 'qty',width : 80,align : "right"}, 
			                     {name : 'lineTotal',width : 150,sortable : false} 
			    ],
		        caption : "多级表格"
		      });
		  jQuery("#list11").jqGrid('navGrid', '#pager11', {
		    add : false,
		    edit : false,
		    del : false
		  });
		//多级表格数据END====
		  /**
		   * 树表格
		   */
		  jQuery("#treegrid").jqGrid({
		    url: ctx+'/TreeGrid.do',
		    treedatatype: "json",
		    mtype: "POST",
		       
		       colModel:[
		         {name:'id',index:'id', width:1,hidden:true,key:true},
		         {name:'name',index:'name', width:180},
		         {name:'num',index:'acc_num', width:80, align:"center"},
		         {name:'debit',index:'debit', width:80, align:"right"},    
		         {name:'credit',index:'credit', width:80,align:"right"},    
		         {name:'balance',index:'balance', width:80,align:"right"}    
		       ],
		    height:'auto',
		    pager : "#ptreegrid",
		    treeGrid: true,
		    ExpandColumn : 'name',
		    caption: "Treegrid example"
		  });	  
});